<!DOCTYPE HTML>
<!-- Copyright (c) 2012 The Chromium Authors. All rights reserved.
  -- Use of this source code is governed by a BSD-style license that can be
  -- found in the LICENSE file. -->
<html>
  <head>
    <title>Notifications Galore!</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body data-active="">
    <div id="templates">
      <div class="section"><h1><span/></h1></div>
      <div class="event"></div>
      <div class="error"></div>
      <div class="spacer"></div>
      <button class="notification borderless">
        <img src="images/white-40x40.png">
      </button>
      <div class="progress-control">
        <input class="progress-oneshot borderless" type="radio" name="progress-type">
        One shot, progress (0-100):
        <input class="progress borderless" type="range" min="0" max="100">
        <br>
        <input class="progress-recurring borderless" type="radio" name="progress-type">
        Recurring, every (1-60)
        <input class="progress-sec borderless" type="number" min="1" max="60">
        seconds, step (1-100):
        <input class="progress-step borderless" type="range" min="1" max="100">
        <br><br>
      </div>
    </div>
    <div id="priority" class="section">
      <h1><span>Priority</span></h1>
      <button class="priority borderless" data-priority="-2">-2</button>
      <button class="priority borderless" data-priority="-1">-1</button>
      <button class="priority borderless" data-priority="0">0</button>
      <button class="priority borderless" data-priority="1">1</button>
      <button class="priority borderless" data-priority="2">2</button>
    </div>
    <div id="other-controls" xclass="section">
      <h1><span>Controls</span></h1>
      <div class="subsection">
        <button id="clear-events">Clear Events</button>
      </div>
      <div class="subsection">
        <button id="record" class="control borderless"><img src="images/record.png"></img></button>
        <button id="pause"  class="control borderless"><img src="images/pause.png"></img></button>
        <button id="stop"   class="control borderless"><img src="images/stop.png"></img></button>
        <button id="play"   class="control borderless"><img src="images/play.png"></img></button>
        <sup id="recording-status">Stopped</sup>
        <div id="recording-stats"> </div>
      </div>
    </div>
    <div id="notifications"></div>
    <h1><span>Events</span></h1>
    <div id="events" class="section"></div>
  </body>
</html>
